<template>
  <view class="container">
    <!-- 金额管理 -->
    <view class="amount_management">
      <view class="amount_management_left">
        <text class="amount_management_text">当前余额</text>
        <text class="amount_management_values">39</text>
      </view>

      <!-- <view class="amount_management_right">
        <text class="amount_management_text">可用电话数</text>
        <text class="amount_management_values">39</text>
      </view> -->

      <!-- 充值记录 -->
      <view class="recharge_record" @click="toRechargeHistory">
        <text class="recharge_record_text">{{ str }}</text>
      </view>
    </view>

    <!-- 选择充值类型 -->
    <!-- <view class="select_recharge_type">
      <u-tabs :list="list1" @click="click"></u-tabs>
    </view> -->

    <!-- 选择充值金额 -->
    <view class="select_recharge_amount">
      <view
        v-for="(item, index) in amountList"
        :key="index"
        :class="{
          select_recharge_amount_content: true,
          select_recharge_amount_content_active: item.value === currentAmount,
        }"
        @click="currentAmount = item.value"
      >
        {{ item.label }}
      </view>
    </view>

    <!-- 选择套餐 -->
    <!-- <view class="select_thali_type">
      <view class="select_thali_type_text">选择套餐</view>

      <view
        class="select_thali_type_content"
        v-for="(item, index) in thaliList"
        :key="index"
      >
        <text>{{ item.label }}</text>
        <text>{{ item.price }}</text>
      </view>
    </view> -->

    <!-- 充值说明 -->
    <view class="select_thali_type_text" style="margin-top: 37.045rpx"
      >充值说明</view
    >

    <view class="recharge_desc">
      <view>1. 最低充值金额为2元。</view> 
    </view>

    <!-- 确认充值 -->
    <view class="confirm_recharge">
      <view class="confirm_recharge_text">确认充值</view>
    </view>
  </view>
</template>
  
  <script>
export default {
  components: {},
  data() {
    return {
      str: "充值记录 >",
      // 页面参数
      options: {},
      list1: [
        {
          name: "请选择充值短信金额",
        },
        {
          name: "请选择充值电话金额",
        },
      ],
      /* 当前选中的充值金额 */
      currentAmount: 5,
      /* 充值金额选择列表 */
      amountList: [
        {
          value: 2,
          label: "¥ 2",
        },
        {
          value: 5,
          label: "¥ 5",
        },
        {
          value: 10,
          label: "¥ 10",
        },
        {
          value: 15,
          label: "¥ 15",
        },
        {
          value: 20,
          label: "¥ 20",
        },
        {
          value: 30,
          label: "¥ 30",
        },
        {
          value: 50,
          label: "¥ 50",
        },
        {
          value: 100,
          label: "¥ 100",
        },
      ],
      /* 套餐列表 */
      thaliList: [
        {
          value: 2,
          label: "100条电话通知+100条短信通知",
          price: "¥ 15",
        },
        {
          value: 5,
          label: "100条电话通知+100条短信通知",
          price: "¥ 25",
        },
      ],
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  methods: {
    click(item) {
      console.log("item", item);
    },
    toRechargeHistory() {
      uni.navigateTo({
        url: "/pages/index/recharge/rechargeHistory/index",
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  background: #f6f7fb;
  height: 100%;

  padding: 17.045rpx 42.614rpx 76.705rpx 42.614rpx;
}

.amount_management {
  // width: 664.773rpx;
  // height: 204.545rpx;
  border-radius: 17.045rpx 92.045rpx 17.045rpx 17.045rpx;
  background: linear-gradient(84.36deg, #8dbbf2 -21.5%, #60a4f7 15.89%);
  padding: 42.614rpx;

  color: #ffffff;

  display: flex;
  // justify-content: space-between;

  position: relative;
}

.amount_management_text {
  font-family: "Microsoft YaHei";
  font-size: 23.864rpx;
  font-weight: 400;
  line-height: 31.5rpx;
}
.amount_management_values {
  font-family: "Microsoft YaHei";
  font-size: 51.136rpx;
  font-weight: 400;
  line-height: 67.483rpx;
  text-align: left;

  margin-top: 28.977rpx;
}

.amount_management_left {
  display: flex;
  flex-direction: column;
}

.amount_management_right {
  margin-left: 85.227rpx;
  display: flex;
  flex-direction: column;
}

.recharge_record {
  width: 173.864rpx;
  height: 57.955rpx;
  border-radius: 42.614rpx 0rpx 0rpx 42.614rpx;

  font-family: "Microsoft YaHei";
  font-size: 20.455rpx;
  font-weight: 400;
  line-height: 27rpx;

  background: #8dbbf2;

  position: absolute;
  right: 0;
  /* 上下居中 */
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  justify-content: center;
  align-items: center;
}

.select_recharge_type {
}

.select_recharge_amount {
  display: flex;
  // gap: 17.045rpx;
  flex-wrap: wrap;
  gap: 30.682rpx;

  margin-top: 23.864rpx;

  .select_recharge_amount_content {
    width: 201.136rpx;
    height: 80.114rpx;
    background: #ffffff;

    display: flex;
    justify-content: center;
    align-items: center;

    // font-family: 'Microsoft YaHei';
    // font-size: 25.568rpx;
    // font-weight: 290;
    // line-height: 34.006rpx;
    font-family: "Microsoft YaHei";
    font-size: 35.795rpx;
    font-weight: 290;
    line-height: 47.608rpx;

    text-align: left;
    color: #60a4f7;

    border-radius: 13.636rpx;
  }
}

.select_recharge_amount_content_active {
  background: #60a4f7 !important;
  color: #ffffff !important;
}

.select_thali_type_text {
  font-family: "Microsoft YaHei";
  font-size: 27.273rpx;
  font-weight: 400;
  line-height: 36rpx;
  text-align: left;
  color: #000000bf;
}

.select_thali_type {
  margin-top: 39.205rpx;

  .select_thali_type_content {
    padding: 18.75rpx 34.091rpx 17.045rpx 30.682rpx;
    border-radius: 17.045rpx;
    background: #ffffff;

    font-family: "Microsoft YaHei";
    font-size: 30.682rpx;
    font-weight: 400;
    line-height: 40.5rpx;
    text-align: left;

    color: #7eb5f9;

    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 25.568rpx;
  }
}

.recharge_desc {
  font-family: Microsoft YaHei;
  font-size: 20.455rpx;
  font-weight: 290;
  line-height: 37.5rpx;
  text-align: left;
  color: #bababa;
}

.confirm_recharge {
  height: 83.523rpx;
  border-radius: 42.614rpx;
  background: #60a4f7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 51.136rpx;
  .confirm_recharge_text {
    font-family: "Microsoft YaHei";
    font-size: 25.568rpx;
    font-weight: 400;
    line-height: 34.006rpx;
    text-align: left;
    color: #ffffff;
  }
}
</style>
  